<!-- FileExplorer.vue -->
<template>
  <div id="data-table">
    <div id="header-style">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="路径名">
          <el-input v-model="formInline.path" placeholder="路径名"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formInline.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="res"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :cell-style="{ textAlign: 'center' }"
        :row-click="handleNodeClick"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="path" label="路径" > 
          <template #default="scope">
            <el-link  class="el-link--primary" @click="handleClick(scope.row)" target="_blank">{{ scope.row.path }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="directory" label="字典"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="openUploadFileDialog(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <uploadFile ref="uploadFile"></uploadFile>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { ElTree } from "element-plus";
import "@/assets/css/CommonStyle.css"; // 导入自定义样式
import uploadFile from "./uploadFile.vue";
// import { FileNode } from '@/data/file-node';
interface TreeNode {
  label: string;
  children?: TreeNode[];
  isLeaf?: boolean;
}

export default defineComponent({
  components: { ElTree, uploadFile },
  created() {
    this.fetchFileExplorerData();
  },
  data() {
    const treeData = ref<TreeNode[]>([]);

    const treeProps = {
      label: "label",
      children: "children",
      isLeaf: "isLeaf",
    };
    return {
      treeData,
      res: "",
      labelPosition: "right",
      formInline: {
        path: "",
        name: "",
      },
    };
  },
  methods: {
    async fetchFileExplorerData() {
      try {
        const response = await this.$axios.get("/minio/allFile");
        if (response.data.data) {
          this.res = response.data.data;
        }
        // const data: FileNode[] =  response.json(); // 将返回数据类型声明为 FileNode[]
        // // 转换后端返回的 FileNode 列表为 ElementPlus Tree 组件所需的 TreeNode 格式
        // const transformedData = this.transformFileNodesToTreeNodes(data);
        // this.treeData.value = transformedData;
      } catch (error) {
        console.error("Error fetching file explorer data:", error);
      }
    },
    // uploadFile(row) {
    //   this.$refs.uploadFile.openDialog(row);
    // },
    openUploadFileDialog(row) {
      console.log(row);
      console.log(row.path);
      this.$refs.uploadFile.showDialog({ ...row });
    },

    handleNodeClick(row) {
      console.log(111);
    },
    handleClick(row) {
      let data = { ...row };
      this.$router.push({ path: "/main/p1Detail", query: data });
      console.log(111);
    },

    onSubmit() {
      console.log(111);
    },
  },
});
</script>
